<!DOCTYPE html>
<title>CSS site color pallete</title>
<style>
   td {
      width: 20em;
      padding: 0 2%;
   }
   .color-block {
      height: 50px;
      border: 10px solid white;
   }
   .color-desc {
      height: 25px;
      padding: 5% 0 0 0;
      text-align: center;
   }
</style>

<table>
   <tr>
      <td class="color-desc">
         $background: #e5e5e5
      </td>
      <td class="color-desc">
         $componentbg: #f5f5f5
      </td>
      <td class="color-desc">
         $componentfg1: #262626
      </td>
   </tr>
   <tr>
      <td class="color-block" style="background-color: #e5e5e5;"></td>
      <td class="color-block" style="background-color: #f5f5f5;"></td>
      <td class="color-block" style="background-color: #262626;"></td>
   </tr>
   <tr>
      <td class="color-desc">
         $componentfg2: rgba(0,0,0,.5)
      </td>
      <td class="color-desc">
         $componentfg3: rgba(0,0,0,.2)
      </td>
      <td class="color-desc">
         $componentfg4: #737373
      </td>
   </tr>
   <tr>
      <td class="color-block" style="background-color: rgba(0,0,0,.5);"></td>
      <td class="color-block" style="background-color: rgba(0,0,0,.2);"></td>
      <td class="color-block" style="background-color: #737373;"></td>
   </tr>
   <tr>
      <td class="color-desc">
         $sidepanebg: white
      </td>
      <td class="color-desc">
         $bordercolor: #ccc
      </td>
      <td class="color-desc">
         $actioncolor1: rgb(132,184,25)
      </td>
   </tr>
   <tr>
      <td class="color-block" style="background-color: white;"></td>
      <td class="color-block" style="background-color: #ccc;"></td>
      <td class="color-block" style="background-color: rgb(132,184,25);"></td>
   </tr>
   <tr>
      <td class="color-desc">
         $actioncolor2: rgb(0,149,52)
      </td>
      <td class="color-desc">
         none: #222
      </td>
      <td class="color-desc">
         none: #db4f39
      </td>
   </tr>
   <tr>
      <td class="color-block" style="background-color: rgb(0,149,52);"></td>
      <td class="color-block" style="background-color: #222;"></td>
      <td class="color-block" style="background-color: #db4f39;"></td>
   </tr>
   <tr>
      <td class="color-desc">
         none: #84b819
      </td>
      <td class="color-desc">
         none: rgba(0,0,0,.4)
      </td>
      <td class="color-desc">
         none: rgba(0,0,0,.3)
      </td>
   </tr>
   <tr>
      <td class="color-block" style="background-color: #84b819;"></td>
      <td class="color-block" style="background-color: rgba(0,0,0,.4);"></td>
      <td class="color-block" style="background-color: rgba(0,0,0,.3);"></td>
   </tr>
   <tr>
      <td class="color-desc">
         $grey5: #aaa
      </td>
      <td class="color-desc">
         $grey6: #ddd
      </td>

   </tr>
   <tr>
      <td class="color-block" style="background-color: #aaa;"></td>
      <td class="color-block" style="background-color: #ddd;"></td>
   </tr>
</table>
